<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>公告管理</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>公告列表</legend>
</fieldset>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">起始时间</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="起始时间" id="startTime" name="startTime" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">终止时间</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="终止时间" id="endTime" name="endTime" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search" id="selectsBtn">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="noticeList" lay-filter="noticeList" class="layui-table"></table>
        </div>
    </div>
</div>
<div id="transferLayer" style="display: none;margin: 10px">
    <div id="transfer" class="demo-transfer"></div>
    <a class="layui-btn layuiadmin-btn-list" style="margin-left: 42%;margin-top: 10px;margin-right: 10px" id="updateCarousel">修改</a>
</div>
<div style="display: none" id="carouselLayer">
    <fieldset class="layui-elem-field">
        <div class="layui-field-box">
            <img src="" width="1525" height="400" id="carousel" style="margin-left: 17px;">
        </div>
    </fieldset>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="updateCarousel">修改轮播展示</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="show">显示</a>
</script>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script>
    var carouselSet;
    var noticeId="";
    var oldCarouselId=[];
    layui.use(['table', 'laydate','layer','upload','transfer'], function () {
        var table = layui.table,
            $ = layui.$,
            form = layui.form,
            layer=layui.layer,
            upload=layui.upload,
            transfer=layui.transfer,
            laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#startTime',
            trigger: 'click'
        });

        laydate.render({
            elem: '#endTime',
            trigger: 'click'
        });


        $("#updateCarousel").on('click',function(){
            var getData = transfer.getData('transferList'); //获取右侧数据
            var value=[]
            for(i in getData){
                value.push(getData[i]['value'])
            }
            if(arrayEqual(value,oldCarouselId)){
                layer.msg("轮播展示无更改")
            }else{
                layer.confirm("确定保存此次修改?", function (index) {
                    showloading(true)
                    var data = {oldNoticeId: oldCarouselId, newNoticeId: value};
                    myAjax(mainUri + "/notice/updateByCarousel", {carouselsStr: JSON.stringify(data)}, function (d) {
                        if (d['code'] == '0') {
                            showloading(true)
                            layer.msg(d['msg'], {
                                icon: 1, time: 2000, end: function () {
                                    layer.closeAll();
                                }
                            })
                        } else {
                            showloading(true)
                            alert(d['msg'])
                            layer.closeAll();
                        }
                    })
                });
            }
        })

        //获取表格数据
        var noticeTable=table.render({
            elem: '#noticeList',
            url: mainUri + '/notice/selects', //数据接口
            where:{noticeType:0,noticeType:1},
            toolbar: '#toolbarDemo',
            cols: [[ //表头
                {field: 'noticeId', title: 'ID'},
                {field: 'title', title: '标题'},
                {field: 'noticeImg', title: '图片展示',templet:function(d){
                        if(carouselSet==undefined){
                            carouselSet =function(nId,nImg){
                                noticeId=nId;
                                if(isNoEmpty(nImg)){
                                    $('#carousel').attr('src', mainUri+nImg);
                                }
                                layer.open({
                                    type: 1,
                                    title: '轮播照片',
                                    content: $('#carouselLayer'),
                                    area: ['1600px', '600px'],
                                    end:function(){
                                        $('#carousel').attr('src', '');
                                    }
                                })
                            }
                        }
                        if(d['noticeType']=='1'){
                            if(!isNoEmpty(d['noticeImg'])){
                                d['noticeImg']='';
                            }
                            return '<a style="margin-left: 5px" onclick="carouselSet(\''+d['noticeId']+'\',\''+d['noticeImg']+'\')" class="layui-btn layui-btn-xs layui-bg-blue carouselSet">图片展示</a>'
                        }
                        return "普通公告"
                    }},
                {field: 'createDate', title: '时间'},
                {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]],
            page: {
                layout: ['prev', 'page', 'next', 'skip', 'count'],
                groups: 3,
                limit: 15,
                theme: '#1E9FFF',
            },
        });

        myAjax(mainUri + '/notice/selects',{noticeType:0,noticeType:1,page:-1},function(d){
            var data=d['data'];
            var newData=[]
            var value=[]
            for(i in data){
                newData.push({"value": data[i]['noticeId'], "title": data[i]['title']})
                if(data[i]['show']==true){
                    value.push(data[i]['noticeId'])
                }
            }
            oldCarouselId=value;
            //显示搜索框
            transfer.render({
                elem: '#transfer'
                ,data: newData
                ,title: ['全部轮播', '展示的轮播']
                ,value: value
                ,showSearch: true
                ,id: 'transferList' //定义唯一索引
            })
        })



        //监听行工具事件
        table.on('tool(noticeList)', function(obj){
            var data = obj.data;
            if(obj.event === 'show'){
                data['content']=data['content'].replaceAll('src="http://localhost:8080','src="'+MainIP)
                var width=document.body.clientWidth/2
                layer.open({
                    title: data['title'],
                    area: [width.toString()+'px', '500px'],
                    content: data['content']
                });
            }
        });

        //监听行工具事件
        table.on('toolbar(noticeList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'updateCarousel') {
                layer.open({
                    type: 1,
                    title: '修改轮播展示(实际展示轮播数为4张)',
                    content: $('#transferLayer'),
                    area: ['520px', '500px']
                })
            }
        });

        /**
         * 搜索按钮
         */
        $("#selectsBtn").on('click', function () {
            var startTime = $("#startTime").val();//开始时间
            var endTime = $("#endTime").val();//结束时间
            var data = {
                startTime: startTime,
                endTime: endTime,
            }
            noticeTable.reload({
                where: data,
            });
        })


        /**
         * 修改更多按钮
         */
        function changeMoreBtn() {
            var btn = $("#moreBtn");
            if (btn.attr("type") == '1') {
                btn.html(" <i class=\"layui-icon\">&#xe654;</i>\n")
                btn.attr('type', '0')
                btn.attr('title', '显示更多')
            } else {
                btn.html(" <i class=\"layui-icon\">&#xe67e;</i>\n")
                btn.attr('type', '1')
                btn.attr('title', '隐藏')
                $("#noticeId").val("");//id
                $("#title").val("");//标题
            }
        }

        /**
         * 更多按钮
         */
        $("#moreBtn").on('click', function () {
            $(".more").toggle('fast', changeMoreBtn());
        })


    });
</script>
</body>
</html>
`